<template>
  <div>
    <!-- <span class="title" v-if="title">{{ title }}</span>-->

    <div class="rich-text-box">
      <!-- 富文本 -->
      <a-textarea :rows="27" v-model="htmlText" @blur="formatCode" />
    </div>

    <div>
      <a-button type="primary" @click="pushHtml">{{ $t('pro.admin.Savechanges') }}</a-button>&nbsp;&nbsp;&nbsp;
      <a-button type="primary" @click="showHtmlPage">{{ $t('pro.admin.showDemo') }}</a-button>&nbsp;&nbsp;
      <a-button @click="back">{{ $t('pro.history.buttonBack') }}</a-button>
    </div>

    <!-- 显示编写好的代码 -->
    <look-html :config="config" :title="title"></look-html>
  </div>
</template>

<script>
import lookHtml from "../../../components/common/custom/LookHtml";
import { style_html } from "../../../utils/tool";
export default {
  name: "RichText",
  components: { lookHtml },
  props: {
    htmlForEditor: String,
    title: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      htmlText: this.htmlForEditor, //escapeHTML(this.htmlForEditor),
      config: {
        isOpen: false,
        htmlCode: ""
      }
    };
  },
  watch: {
    htmlForEditor(v) {
      //this.htmlText = escapeHTML(v)
      this.htmlText = v;
    },
    htmlText(v) {
      this.htmlText = v;
    }
  },
  methods: {
    //格式化代码
    formatCode() {
      this.htmlText = style_html(this.htmlText);
    },
    //提交后台
    pushHtml() {
      this.$emit("click", this.htmlText);
    },

    //显示用户编译好的页面
    showHtmlPage() {
      this.config.htmlCode = this.htmlText;
      this.config.isOpen = true;
    },
    back() {
      this.$router.push({ path: "/admin/sitesettings" });
    }
  }
};
</script>

<style scoped>
.rich-text-box {
  margin-bottom: 1.5rem;
}
</style>
